<template>
	<div id="app" class="container">
		<!--查询模块-->
		<div class="row">
			<el-form :inline="true" :model="psUser" class="demo-form-inline">
				<el-form-item label="用户名称">
					<el-input v-model="psUser.username" placeholder="用户名称"></el-input>
				</el-form-item>
				<el-form-item label="使用状态">
					<el-select v-model="psUser.userstatus" placeholder="--请选择--">
						<el-option label="正常" value="1"></el-option>
						<el-option label="冻结" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click.prevent="load()">查询</el-button>
				</el-form-item>
			</el-form>
		</div> <!--查询模块结束-->

		<el-table :data="list" border style="width: 100%">
			<el-table-column fixed prop="usercode" label="用户账号">
			</el-table-column>
			<el-table-column prop="username" label="用户姓名">
			</el-table-column>
			<el-table-column prop="psRole[0].rolename" label="角色">
			</el-table-column>
			<el-table-column prop="email" label="电子邮件">
			</el-table-column>
			<el-table-column prop="lastlogintime" label="最后登录时间">
			</el-table-column>
			<el-table-column prop="userstatus" label="状态(正常/冻结)">
				<template slot-scope="scope">
					<span v-if="scope.row.userstatus === 1">正常</span>
					<span v-else>冻结</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="150">
				<template slot-scope="scope">
					<el-button @click="stateUpd(scope.row)" type="text" size="small">
						<span v-if="scope.row.userstatus === 1">冻结</span>
						<span v-else>正常</span>
					</el-button>
					<!-- 修改区域 -->
					<!-- <el-button @click="upd(scope.row)" type="text" size="small">修改</el-button> -->
					<el-button type="text" @click="upd(scope.row)">修改</el-button>
					<!-- 弹出层 -->
					<el-dialog title="修改用户" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
						<el-form :model="psUserUpd">
							<el-form-item label="登录账号" :label-width="formLabelWidth">
								<el-input v-model="psUserUpd.usercode" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="用户名称" :label-width="formLabelWidth">
								<el-input v-model="psUserUpd.username" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="角色" :label-width="formLabelWidth">
								<el-select v-model="psUserUpd.roleid"  placeholder="--请选择--">
									<el-option  v-for="item in roleList" :label="item.rolename" :value="Number(item.id)"></el-option>
									<!-- <el-option label="系统管理员" :value="1"></el-option>
									<el-option label="线路管理员" :value="2"></el-option>
									<el-option label="巡检员" :value="3"></el-option>
									<el-option label="消缺员" :value="4"></el-option> -->
								</el-select>
							</el-form-item>
							<el-form-item label="入职时间" :label-width="formLabelWidth">
								<el-input v-model="psUserUpd.entrydate" type="date" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="离职时间" :label-width="formLabelWidth">
								<el-input v-model="psUserUpd.dimissiondate" type="date" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="使用状态" :label-width="formLabelWidth">
								<el-radio v-model="psUserUpd.userstatus" label="0">冻结</el-radio>
								<el-radio v-model="psUserUpd.userstatus" label="1">正常</el-radio>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="userUpd()">确 定</el-button>
							<el-button @click="dialogFormVisible = false">取 消</el-button>
						</div>
					</el-dialog>
					<!-- 修改区域结束 -->
					<el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
					<el-button @click="logPrint(scope.row)" type="text" size="small">LOG日志</el-button>
					<!-- 日志弹出层 -->
					<el-dialog title="查看log日志" :visible.sync="dialogTableVisible" :modal-append-to-body="false">

						<!--查询模块-->
						<div class="row">
							<el-form :inline="true" :model="psUser" class="demo-form-inline">
								<el-form-item label="操作时间">
									<el-input v-model="psLogs.firstoperatedatetime" type="date"
										placeholder="操作时间"></el-input>
								</el-form-item>
								———
								<el-form-item>
									<el-input v-model="psLogs.lastoperatedatetime" type="date"
										placeholder="操作时间"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click.prevent="logLoad()">查询</el-button>
								</el-form-item>
							</el-form>
						</div> <!--查询模块结束-->

						<el-table :data="psLogsList">
							<el-table-column property="usercode" label="序号"></el-table-column>
							<el-table-column property="username" label="用户"></el-table-column>
							<el-table-column property="operateinfo" label="操作信息"></el-table-column>
							<el-table-column property="operatedatetime" label="操作事时间"></el-table-column>
						</el-table>

						<!--日志弹出层分页-->
						<!--显示分页信息-->
						<div class="row  text-right">
							<!--文字信息-->
							<div class="col-md-6">
								当前第 <input name="startPage" :value="psLogspageInfo.pageNum"
									style="width: 20px" />/{{psLogspageInfo.pages}}页.一共
								{{psLogspageInfo.total}}条记录
							</div>
							<!--点击分页-->
							<div class="col-md-6" style="z-index: 0;">
								<nav aria-label="Page navigation example">
									<ul class="pagination">
										<li class="page-item"><a class="page-link" href="javascript:;"
												@click="psLogspageInfo.pageNum=1;logLoad( )">首页</a></li>
										<li class="page-item" :class="{'disabled':!psLogspageInfo.hasPreviousPage}">
											<a class="page-link" href="javascript:;"
												@click="psLogspageInfo.pageNum=psLogspageInfo.pageNum-1;logLoad()"
												aria-label="Previous">
												<span aria-hidden="true">&laquo;</span>
											</a>
										</li>
										<li class="page-item" v-for="p in psLogspageInfo.navigatepageNums"
											:class="{'active':psLogspageInfo.pageNum==p}"><a class="page-link"
												href="javascript:;" @click="psLogspageInfo.pageNum=p;logLoad()"
												v-text="p"></a></li>
										<li class="page-item" :class="{'disabled':!psLogspageInfo.hasNextPage}">
											<a class="page-link" href="javascript:;"
												@click="psLogspageInfo.pageNum=psLogspageInfo.pageNum-0+1;logLoad()"
												aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
											</a>
										</li>
										<li class="page-item"><a class="page-link" href="javascript:;"
												@click="psLogspageInfo.pageNum=psLogspageInfo.pages;logLoad()">尾页</a>
										</li>
									</ul>
								</nav>
							</div>
						</div>
						<!--分页结束-->

					</el-dialog>
					<!-- 日志弹出层结束 -->
				</template>

			</el-table-column>


		</el-table>
		<!--分页-->
		<!--显示分页信息-->
		<div class="row  text-right">
			<!--文字信息-->
			<div class="col-md-6">
				当前第 <input name="startPage" :value="pageInfo.pageNum" style="width: 20px" />/{{pageInfo.pages}}页.一共
				{{pageInfo.total}}条记录
			</div>
			<!--点击分页-->
			<div class="col-md-6" style="z-index: 0;">
				<nav aria-label="Page navigation example">
					<ul class="pagination">
						<li class="page-item"><a class="page-link" href="javascript:;"
								@click="pageInfo.pageNum=1;load( )">首页</a></li>
						<li class="page-item" :class="{'disabled':!pageInfo.hasPreviousPage}">
							<a class="page-link" href="javascript:;" @click="pageInfo.pageNum=pageInfo.pageNum-1;load()"
								aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						<li class="page-item" v-for="p in pageInfo.navigatepageNums"
							:class="{'active':pageInfo.pageNum==p}"><a class="page-link" href="javascript:;"
								@click="pageInfo.pageNum=p;load()" v-text="p"></a></li>
						<li class="page-item" :class="{'disabled':!pageInfo.hasNextPage}">
							<a class="page-link" href="javascript:;"
								@click="pageInfo.pageNum=pageInfo.pageNum-0+1;load()" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
						<li class="page-item"><a class="page-link" href="javascript:;"
								@click="pageInfo.pageNum=pageInfo.pages;load()">尾页</a></li>
					</ul>
				</nav>
			</div>
		</div>
		<!--分页结束-->
	</div>

</template>

<script>
	import {
		queryByUser,
		deleteById,
		userUpd,
		PersonalDataUpd,
		queryByLogs,
		queryByRoleTwo
	} from '@/config/request'
	export default {
		data() {
			return {
				psUser: {
					username: '',
					userstatus: ''
				},
				psUserUpd: {
					id: '',
					usercode: '',
					username: '',
					userpassword: '',
					sex: '',
					age: '',
					entrydate: '',
					dimissiondate: '',
					phonetel: '',
					email: '',
					creationtime: '',
					lastlogintime: '',
					createdby: '',
					lastupdatetime: '',
					userstatus: '',
					roleid: '',
					pageNum: '1',
					str: '',
					psRole: ''
				},
				queryByuser: {
					username: '',
					userstatus: '',
					pageNum: '1',
				},
				list: [],
				pageInfo: {},
				delPsUser: {
					id: ''
				},
				dialogTableVisible: false,
				dialogFormVisible: false,
				formLabelWidth: '120px',
				//验证账号或密码是否重名的对象
				distinctUser: {},
				psLogs: {
					id: '',
					usercode: '',
					username: '',
					operateinfo: '',
					operatedatetime: '',
					firstoperatedatetime: '',
					lastoperatedatetime: '',
					pageNum: '1',
				},
				psLogsList: [],
				psLogspageInfo: {},
				roleList:[]

			}
		},
		methods: {
			load() {
				this.psUser.pageNum = this.pageInfo.pageNum;
				this.queryByuser.username = this.psUser.username;
				this.queryByuser.userstatus = this.psUser.userstatus;
				this.queryByuser.pageNum = this.psUser.pageNum;
				queryByUser(this.queryByuser).then(json => {
					this.pageInfo = json.data.pageInfo;
					this.list = json.data.pageInfo.list;
				})
				queryByRoleTwo().then(json=>{
					this.roleList = json.data.psRoleList;
				})
			}, //删除
			del(id) {
				this.delPsUser.id = id;
				let flag = confirm("确认要删除该用户吗？");
				if (flag) {
					deleteById(this.delPsUser).then(json => {
						this.load();
					})
				}
			}, //进入修改，给用户绑值
			upd(user) {
				this.dialogFormVisible = true
				this.psUserUpd = user;
				this.psUserUpd.userstatus = JSON.stringify(user.userstatus);
			}, //实现修改用户信息的操作
			userUpd() {
				//关闭弹出层
				this.dialogFormVisible = false;
				this.distinctUser.usercode = this.psUserUpd.usercode;
				this.distinctUser.username = this.psUserUpd.username;
				queryByUser(this.distinctUser).then(json => {
					console.log(json)
					if (json.data.pageInfo.list.length == 0) {
						PersonalDataUpd(this.psUserUpd).then(json => {
							this.load();
						})
					} else if (json.data.pageInfo.list[0].id == this.psUserUpd.id) {
						PersonalDataUpd(this.psUserUpd).then(json => {
							this.load();
						})
					} else {
						alert("false")
					}
				})
			}, //实现修改用户状态
			stateUpd(user) {
				let flag = confirm("确认修改状态吗？");
				if (flag) {
					if (user.userstatus == 0) {
						user.userstatus = 1;
					} else {
						user.userstatus = 0;
					}
					PersonalDataUpd({
						id: user.id,
						userstatus: user.userstatus
					}).then(json => {})
				}
			},
			logLoad() {
				this.psLogs.pageNum = this.psLogspageInfo.pageNum;
				queryByLogs(this.psLogs).then(json => {
					console.log(json)
					this.psLogspageInfo = json.data.pageInfo;
					this.psLogsList = json.data.pageInfo.list;
				})
			},
			logPrint(user) {
				this.psLogs.usercode = user.usercode;
				this.psLogs.pageNum = this.psLogspageInfo.pageNum;
				queryByLogs(this.psLogs).then(json => {
					console.log(json)
					this.psLogspageInfo = json.data.pageInfo;
					this.psLogsList = json.data.pageInfo.list;
				})
				this.dialogTableVisible = true;
			}
		},
		mounted() {
			this.load()
			this.logLoad()
		}
	}
</script>

<style>
</style>